<!-- 附件列表管理 -->
<template>
  <el-container class="attachmentManage">
    <!-- <el-header height="36px">
      <header-title :title="$route.meta.title" />
    </el-header> -->
    <el-main class="mainDetails">
      <div>
        <SearchPanel title="查询条件">
          <div ref="queryFormBox" class="search-flex-box">
            <MyForm
              ref="formRef"
              v-model="queryParams"
              :form-option="formOption"
              :select-list="dicLists"
              class="myForm"
            />
            <div class="searchBtn">
              <el-button type="primary" class="pms-button-primary" @click="doSearch">查询</el-button>
              <el-button class="pms-button-primary" size="small" @click="dialogCheckbox = true">
                自定义列
              </el-button>
            </div>
          </div>
        </SearchPanel>
        <SearchList title="查询结果" style="margin-top: 16px">
          <template #body>
            <MyTable
              id="prjId"
              ref="myTableRef"
              :table-data="tableData"
              :columns="colOption"
              :col-option-enum="dicLists"
              :is-selection="false"
            >
              <template #prjName="{ scope }">
                <el-button type="text" @click="goPage(scope)">{{ scope.prjName }}</el-button>
              </template>
            </MyTable>
            <pagination
              v-if="pageParam.total > 10"
              :total="pageParam.total"
              :page.sync="pageParam.pageNum"
              :limit.sync="pageParam.pageSize"
              @pagination="doSearch"
            />
          </template>
        </SearchList>
        <el-dialog
          v-dialogDrag
          title="列表字段配置"
          width="50%"
          :append-to-body="true"
          :modal-append-to-body="true"
          :modal="true"
          :close-on-click-modal="false"
          :lock-scroll="true"
          class="pms-dialog"
          :visible.sync="dialogCheckbox"
        >
          <div class="dialogCheckbox">
            <SetDynamics ref="customRef" :fixed-check-option="fixedCheckOption" :custom-check-option="customCheckOption" />
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button class="pms-button-primary" size="small" @click="activeCustomCheck">确 定</el-button>
            <el-button class="pms-button-primary" size="small" @click="dialogCheckbox = false">取消</el-button>
          </div>
        </el-dialog>
      </div>
    </el-main>
  </el-container>
</template>

<script>
// import HeaderTitle from '@/components/basic/HeaderTitle'
import MyForm from '@/components/basic/myForm'
import SearchPanel from '@/components/basic/SearchPanel'
import SearchList from '@/components/basic/SearchList'
import MyTable from '@/components/basic/myTable'
import SysConst from '@/common/const'
import SetDynamics from '@/components/basic/setDynamics.vue'
import { getDropdownData } from '@/api/common' // 字典接口
import { getFileListApi } from '@/api/attachManagement/attachments/attachmentManage'
import { queryOrgApi } from '@/api/attachManagement/electronicSign/eleSignVerConfig'
import {
    formOption,
    colOption,
    customCheckOption
} from '.'

export default {
    name: 'AttachmentManage',
    components: {
        // HeaderTitle,
        MyForm,
        SearchPanel,
        SearchList,
        MyTable,
        SetDynamics
    },
    data() {
        return {
            formOption, // 查询条件配置
            tableData: [], // 列表数据
            colOption, // 列表表头
            fixedCheckOption: colOption, // 固定字段
            customCheckOption, // 自定义字段
            queryParams: {
                prjYear: new Date().getFullYear().toString()
            }, // 查询条件
            dialogCheckbox: false, // 自定义列表弹框
            dicLists: {}, // 下拉框字典选项集合
            isOnly: '1', // 是否仅有基本字段，1-是，0-否 必需 用户选择自定义字段后需要传0，否则传1，默认传1
            // 分页信息
            pageParam: {
                pageSize: SysConst.PAGESIZE, // 每页显示val条
                pageNum: SysConst.CURRENT_PAGE, // 当前页
                total: SysConst.TOTAL // 总数
            }
        }
    },
    created() {
        this.queryOrg()
        this.getDictData()
        this.doSearch()
    },
    methods: {
        // 查看数据
        doSearch(item) {
            console.log(item, this.queryParams, 'fenye')
            const params = {
                pageNum: item?.page || SysConst.CURRENT_PAGE,
                pageSize: item?.limit || SysConst.PAGESIZE,
                isOnly: this.isOnly,
                ...this.queryParams
            }
            getFileListApi(params).then(res => {
                if (+res.code !== 200) {
                  return Promise.reject(res)
                }
                console.log(res, '附件信息')
                this.tableData = res.data?.records
                this.pageParam.total = res.data?.total || 0
                this.pageParam.pageSize = item?.limit || SysConst.PAGESIZE
                this.pageParam.pageNum = item?.page || SysConst.CURRENT_PAGE
            })
        },
        // 点击跳转
        goPage(row) {
            console.log(row, 'row')
            const page = this.$router.resolve({
                name: 'AttachmentDetails',
                query: {
                    prjId: row.prjId
                }
            })
            window.open(page.href, '_blank')
        },
        // 重置
        // resetSearch() {
        //     this.$refs.formRef.reset()
        //     this.isOnly = '1'
        //     this.doSearch()
        // },
        // 自定义弹框-点击确认
        activeCustomCheck() {
            const list = this.$refs.customRef.checkboxValue
            if (list.length) {
                this.isOnly = '0'
                this.doSearch({
                    page: this.pageParam.pageNum,
                    limit: this.pageParam.pageSize
                })
            }
            this.colOption = [...colOption, ...list]
            this.dialogCheckbox = false
        },
        // 查询建设单位
        async queryOrg() {
            const res = await queryOrgApi()
            this.$set(this.dicLists, 'BUILD_UNIT', res.data ?? [])
        },
        // 获取下拉框数据
        async getDictData() {
            const arr = ['IS_NEWBUSINESS', 'PROJ_TYPE', 'BUILD_MODES']
            const promises = arr.map(item => getDropdownData(item))
            const results = await Promise.all(promises)
            arr.forEach((item, i) => {
                this.$set(this.dicLists, item, results[i].data ?? [])
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.attachmentManage {
    width: 100%;
    .mainDetails {
        padding: 0 25px;
    }
    .customBtn {
        height: 20px;
        line-height: 20px;
        font-size: 14px;
        margin: 10px 20px 10px 90%;
        cursor: pointer;
        .el-icon-s-tools {
            font-size: 20px;
            color: #999;
            margin-right: 6px;
        }
    }
}
.search-flex-box {
    // display: flex;
    // justify-content: space-between;
    height: auto;
}
.searchBtn {
    width: 100px;
    margin-left: auto;
    display: flex;
    margin-top: 4px;
    flex-direction: column;
    .el-button + .el-button {
        margin-left: 0;
        margin-top: 8px;
    }
}

.el-button--text {
    color: #02A7F0;
}
.dialog-footer {
    display: flex;
    justify-content: center;
}
</style>

